<template>
  <!-- 这里记得删除 -->
  <div style="display: flex">
    <div
      style="
        width: 180px;
        height: 86vh;
        top: 75px;
        position: fixed;
        background-color: #efefef;
        border-radius: 10px;
        z-index: 9;
      "
    >
      <div style="color: #ed6a12; text-align: center; font-size: 18px">
        筛&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;选
      </div>
      <br />
      <el-row>
        <el-col>
          <!-- 价格排序开始 -->
          <el-button
            style="height: 45px !important; margin-left: 25px; color: #ed6a12"
            type="text"
            @click="toggleSort"
          >
            <div
              style="
                display: flex;
                justify-content: center;
                align-items: center;
              "
            >
              <div>价格排序</div>
              <div>
                <div
                  :style="{ color: isAscending ? activeColor : inactiveColor }"
                >
                  <i class="el-icon-arrow-up"></i>
                </div>
                <div
                  :style="{ color: isAscending ? inactiveColor : activeColor }"
                >
                  <i class="el-icon-arrow-down"></i>
                </div>
              </div>
            </div>
          </el-button>
          <!-- 价格排序结束 -->
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :offset="3" style="color: #ed6a12; font-size: small">
          书名检索
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20" :offset="2">
          <el-input
            v-model="page.bookName"
            prefix-icon="el-icon-search"
            id="searchInput"
            placeholder="输入书名"
          ></el-input>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :offset="3" style="color: #ed6a12; font-size: small">
          作者检索
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20" :offset="2">
          <el-input
            v-model="page.author"
            prefix-icon="el-icon-search"
            id="searchInput"
            placeholder="输入作者"
          ></el-input>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :offset="3" style="color: #ed6a12; font-size: small">
          价格区间
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="9" :offset="2">
          <el-input
            v-model.number="page.startPrice"
            @input="handleStartPrice"
            id="searchInput"
            placeholder="最小"
          ></el-input>
        </el-col>
        <el-col :span="2">
          <span
            style="
              height: 35px;
              color: #ed6a12;
              display: flex;
              align-items: center;
              justify-content: center;
            "
            >--</span
          >
        </el-col>
        <el-col :span="9">
          <el-input
            @blur="handleEndPrice"
            v-model.number="page.endPrice"
            id="searchInput"
            placeholder="最大"
          ></el-input>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :offset="3" style="color: #ed6a12; font-size: small">
          分类
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="20" :offset="2">
          <el-select id="selectBtn" v-model="page.classId" placeholder="请选择类别">
            <el-option
              v-for="(item, index) in classList"
              :key="index"
              :label="item.className"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-col>
      </el-row>
      <br />
      <el-row>
        <el-col :span="3" :offset="4">
          <!-- 搜索按钮 -->
          <el-button @click="search" class="searchBtn" circle
            ><i class="el-icon-search"></i
          ></el-button>
        </el-col>
        <el-col :span="3" :offset="4">
          <!-- 重置按钮 -->
          <el-button @click="reset" class="resetBtn" circle
            ><i class="el-icon-delete"></i
          ></el-button>
        </el-col>
      </el-row>
    </div>
    <div style="margin-left: 200px; width: 1300px">
      <br /><br /><br /><br />
      <el-carousel
        :interval="4000"
        height="400px"
        style="background-color: #efefef; border-radius: 10px"
      >
        <el-carousel-item
          v-for="(item, index) in lunbotu"
          :key="index"
          style="height: 100%"
        >
          <el-image
            class="elimage"
            @click="toCarouselUrl(item.url)"
            style="width: 100%; height: 100%"
            :src="item.img"
            fit="fill"
          ></el-image>
        </el-carousel-item>
      </el-carousel>
      <el-empty
        v-if="bookList.length != 0 ? false : true"
        description="抱歉，查不到相关书籍哦，过段时间再来看看吧"
      ></el-empty>
      <div v-if="bookList.length != 0 ? true : false">
        <div
          style="
            flex-wrap: wrap;
            justify-content: flex-start;
            width: 100%;
            margin-left: 0px;
          "
        >
          <!-- 书籍展示开始 下面这个div的click事件查看这本书的具体信息 -->
          <!-- 这个地方改一下样式 -->
          <div
            v-for="(item, index) in bookList"
            class="book-item"
            :key="index"
            @click="getOne(item.id)"
          >
            <img
              style="
                height: 240px;
                width: 180px;
                margin-bottom: 2px;
                padding-bottom: 0;
              "
              :src="item.cover"
              alt="加载失败"
            />
            <div
              style="height: 80px; margin: auto; border-top: 1px solid #e23200"
            >
              <i style="color: #e23200">￥</i
              ><span
                style="color: #e23200; font-weight: 700; font-size: 25px"
                >{{ item.price }}</span
              >
              <el-tooltip
                :content="item.className"
                placement="top"
                effect="light"
              >
                <span
                  style="margin-left: 25px; font-size: 15px; color: #707980"
                  >{{ getSubStringC(item.className) }}</span
                >
              </el-tooltip>
              <br />
              <div>
                <el-popover
                  :open-delay="300"
                  placement="top-start"
                  width="200"
                  trigger="hover"
                  :content="item.bookName"
                >
                  <div
                    style="font-size: 15px; font-weight: 300; color: #060708de"
                    slot="reference"
                  >
                    {{ getSubString(item.bookName) }}
                  </div>
                </el-popover>
              </div>
              <div>
                <el-tooltip
                  :open-delay="500"
                  :content="item.author"
                  placement="top"
                >
                  <div style="color: #d1d1d1; font-size: 13px">
                    <span>作者:</span>{{ getSubString(item.author) }}
                  </div>
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
        <!-- 书籍展示结束 -->

        <br />
        <!-- 分页开始 -->
        <div class="block">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="page.currentPage"
            :page-sizes="[10, 15, 20, 25]"
            :page-size="page.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="page.total"
          >
          </el-pagination>
        </div>
        <!-- 分页结束 -->
        <br>
      </div>
    </div>
  </div>
</template>  
<script>
import { getBooks } from "../api/bookMG"; //书籍表相关请求
import { getClass } from "../api/bookMG"; //书籍表相关请求
import { getCarousel } from "../api/carouselMG"; //轮播图请求
export default {
  name: "ListView",
  data() {
    return {
      lunbotu: [],
      classList: [
        //从后端获取的类别的列表类别可以从数据库单独获取，这里应该是一来这个页面就访问这个接口
      ],
      isAscending: true, // 初始状态假设为降序
      activeColor: "#ed6a12", // 激活颜色
      inactiveColor: "#d8dee4", // 非激活颜色

      page: {
        currentPage: 1, //当前页是第几页
        pageSize: 10, //每页最多多少条
        total: 0, //总共多少条
        bookName: "", //查询条件书名和作者和发布时间区间,
        classId: "", //类别,如果没选择就不走这个判定，后端要注意一下
        author: "", //作者
        startPrice: "", //钱的区间最小钱,这两个价格为空时候就查0-99999.00//应该不会大于这个99999
        endPrice: "", //最大钱
        priceSort: true,
      },
      bookList: [
        //书的列表
        // 书的id,图片，书的名字，价格等
      ],
    };
  },
  methods: {
    search(){
      //点击搜索触发搜索事件
      this.page.currentPage=1
      this.getList()
    },
    toCarouselUrl(url) {
      //点击轮播图的图片跳转到那个网页
      // 确保url是一个完整的URL，包括协议部分
      if (!/^https?:\/\//.test(url)) {
        url = "https://" + url; // 如果url不是以http或https开头，则默认为http
      }
      // 点击轮播图的图片跳转到那个网页
      window.open(url, "_blank");
    },

    handleEndPrice(value) {
      //最大值
      value = this.page.endPrice;
      //解析输入的最大值是否合法，数字校验本身已经判定过了，这里只需要判定与规定的min max大小比较
      if (value < 0) {
        this.page.endPrice = "";
        this.$message.error("亲，您输入的价格太小啦");
        return;
      } else if (value > 9999) {
        this.page.endPrice = "";
        this.$message({
          showClose: true,
          type: "error",
          message: "亲，您输入的价格太大啦",
        });
        return;
      }
      if (this.page.startPrice != "") {
        //要考虑到当它不为空,那么就要允许输入完成后再判断
        if (value < this.page.startPrice) {
          //最大价格不为空字符串且start大于了end就执行这个
          this.page.endPrice = "";
          this.$message.error("亲，您输入的最大价格小于您输入的最小价格了哦");
          return;
        }
      }
      //如果为空字符串，那只要上面那个输入多少就是多少，不用清空
    },
    handleStartPrice(value) {
      //最小值
      console.log(value);
      //解析输入的最小值是否合法，数字校验本身已经判定过了，这里只需要判定与规定的min max大小比较
      if (value < 0) {
        this.page.startPrice = "";
        this.$message.error("亲，您输入的价格太小啦");
        return;
      } else if (value > 9999) {
        this.page.startPrice = "";
        this.$message.error("亲，您输入的价格太大啦");
        return;
      }
      if (this.page.endPrice != "") {
        if (value > this.page.endPrice) {
          //最大价格不为空字符串且start大于了end就执行这个
          this.page.startPrice = "";
          this.$message.error("亲，您输入的最小价格大于您输入的最大价格了哦");
          return;
        }
      }
      //如果为空字符串，那只要上面那个输入多少就是多少，不用清空
    },
    reset() {
      // 重置按钮
      this.page.bookName = "";
      this.page.author = "";
      this.page.classId = "";
      this.page.startPrice = "";
      this.page.endPrice = "";
      this.page.currentPage = 1; //当前页是第几页
      //重置之后从新查询一次
      this.getList();
    },
    getClassName() {
      //获取书的所有类别
      getClass().then((res) => {
        if (res.data.code == 200) {
          this.classList = res.data.data;
          console.log(res.data.data);
        }
      });
    },
    toggleSort() {
      //发送
      //切换排序方式，初始默认为升序
      this.isAscending = !this.isAscending; // 切换排序状态
      this.page.priceSort = this.isAscending;
      this.getList();
    },

    getOne(id) {
      //这里跳转到详情页,过程是把值传给父组件，然后父组件再传给另一个子组件
      console.log(id);
      // 假设我们要传递的数字是 id
      // 触发自定义事件 'listToProduct'，并将数字作为参数传递
      this.$emit("listToProduct", id);
    },
    async getList() {
      //这里获取分页后的列表，其实是条件查询后的，需要当前页和每页总条数，和每页尺寸
      //  console.log(this.page)
      await getBooks(this.page).then((res) => {
        if (res.data.code == 200) {
          console.log(res.data.data.list);
          this.bookList = res.data.data.list;
          // res.data.data.list.total这个是一共多少页
          this.page.total = res.data.data.total; //复制给list
        }
      });
    },

    handleSizeChange(pageSize) {
      //改变每页尺寸触发事件
      this.page.pageSize = pageSize;
      this.getList();
    },
    handleCurrentChange(currentPage) {
      //改变当前页也会触发事件
      this.page.currentPage = currentPage;
      this.getList();
    },
    getSubString(str) {
      //截取作者和简介前10个字符
      if (str != null && str.length > 10) {
        return str.slice(0, 10) + "...";
      } else {
        return str;
      }
    },
    getSubStringC(str) {
      //截取类名前5个字符
      if (str != null && str.length > 5) {
        return str.slice(0, 5) + "...";
      } else {
        return str;
      }
    },
    async getCarouselList() {
      await getCarousel().then((res) => {
        if (res.data.code == 200) {
          console.log("lubnbo", res);
          this.lunbotu = res.data.data;
        }
      });
    },
  },

  mounted() {
    this.getClassName();
    this.getList();
    this.getCarouselList();
  },
};
</script>  
  
<style lang="scss" scoped>
.el-input.is-disabled .el-input__inner {
  font-size: large !important;
  color: black !important;
  border: 1px solid #1f6888 !important;
  background-color: rgba(177, 205, 234, 0.96) !important;
}
/* 确保这个选择器足够具体，以覆盖默认样式 */
.el-textarea.is-disabled .el-textarea__inner {
  font-size: large !important;
  color: black !important;
  border: 1px solid #1f6888 !important;
  background-color: rgba(177, 205, 234, 0.96) !important;
}
/* 覆盖 Element UI 的 number input 样式，自定义上下箭头 */
.el-input__inner::-webkit-inner-spin-button,
.el-input__inner::-webkit-outer-spin-button {
  /* 隐藏原生的上下箭头  */
  display: none;
}

.book-item {
  background-color: #efefef;
  border-radius: 10px;
  height: 310px;
  margin-left: 11px;
  margin-top: 8px;
  margin-bottom: 8px;
  display: inline-block;
  padding: 10px 7px; /* 为 .book-item 设置内边距 */
  border: 1px solid #d3d3d3; /* 初始边框颜色 */
  transition: transform 0.3s ease, border-color 0.3s ease; /* 过渡效果 */
  position: relative; /* 为了定位tooltip */
  cursor: pointer; /* 鼠标悬停时显示小手图标 */
}

.book-item:hover {
  transform: scale(1.05); /* 放大效果 */
  border-color: #f70707; /* 边框颜色变化 */
  z-index: 1; /* 提升堆叠顺序 */
}

:deep(#searchInput) {
  border-radius: 40px !important;
}
:deep(#searchInput:focus) {
  border: 1px solid #ed6a12;
}

:deep(#selectBtn) {
  border-radius: 50px;
}
:deep(#selectBtn:focus) {
  border: 1px solid #ed6a12;
}
.searchBtn,
.searchBtn:focus {
  background-color: #ed6a12;
  //设置初始的 transform 和 transition 属性 */
  transition: transform 0.8s ease; // 过渡效果持续0.3秒
}
.searchBtn:hover {
  //鼠标移入时放大，假设放大1.1倍
  background-color: #ed6a12;
  transform: scale(1.1);
}
.searchBtn i {
  color: #fff;
  // 初始的 transform 和 transition 属性
  transition: transform 0.8s ease;
}
.searchBtn:hover i {
  // 鼠标移入时图标旋转一周，即360度
  transform: rotateY(180deg);
}

.resetBtn,
.resetBtn:focus {
  background-color: #868381;
  //设置初始的 transform 和 transition 属性 */
  transition: transform 0.8s ease; // 过渡效果持续0.8秒
}
.resetBtn:hover {
  //鼠标移入时放大，假设放大1.1倍
  background-color: #868381;
  transform: scale(1.1);
}
.resetBtn i {
  color: #fff;
  // 初始的 transform 和 transition 属性
  transition: transform 0.8s ease;
}
.resetBtn:hover i {
  // 鼠标移入时图标旋转一周，即360度
  transform: rotateY(180deg);
}

// -----------------------------------------
.elimage:hover{
  //轮播图鼠标移入这个鼠标的icon变成一个手指着的icon
  cursor: pointer;
}
</style>